<template>
<div class="out">
  <div :class="{badge:badge!==null&&badge!=='dot',badgeFixed:badge!==null,dot:badge==='dot'}">
    <div v-if="badge!=='dot'">
      {{ badge }}
    </div>

  </div>
  <div class="slot">
    <slot name="badgeItem">
      <img src="@/assets/img/profile/order4.png">
    </slot>
  </div>

</div>
</template>

<script>
export default {
name: "badge",
  props:{
  badge:{
    type:String||Number,
    default:null
  }
  }
}
</script>

<style scoped>
.out{
  display: inline-block;
  position: relative;

}
.slot{
  margin: 0 auto;
}
img{
  width: .8rem;
  height: .8rem;
}
.dot{
  width: .15rem;
  height: .15rem;
  border-radius: 50%;
  background-color: red;
}
.badgeFixed{
  position:absolute;
  top: .1rem;
  right: -.1rem;
  -webkit-transform: translate(50%,-50%);
  transform: translate(50%,-50%);
  -webkit-transform-origin: 100%;
  transform-origin: 100%;
}
.badge{
  z-index: 1;
  display: inline-block;
  box-sizing: border-box;
  min-width: .4rem;
  padding: 0 .1rem;
  color: #FF7700;
  font-weight: 550;
  font-size: .3rem;
  text-align: center;
  background-color: #fff;
  border: .05rem solid #FF7700;
  border-radius: .5rem;
}
.badge-fixed{

}
</style>